<!--
 * @Description: 请输入....
 * @Author: Gavin
 * @Date: 2022-01-11 13:18:30
 * @LastEditTime: 2022-01-21 15:00:21
 * @LastEditors: Gavin
-->
<!DOCTYPE html>
<html>
  <head>
    <title>年会抽奖</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      body {
        background: url(https://sixos.oss-cn-beijing.aliyuncs.com/profile/upload/2024/12/19/bdf82d15083346d3996e8f3e538b8164.png)
          no-repeat;
        /* background: url('../img/new_bg.png') no-repeat; */
        background-size: cover;
      }

      .liveAlertPlaceholder {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
      }

      .form-box {
        width: 600px;
        background: #fff;
        border-radius: 10px;
        padding: 30px;
      }

      .form-box-title {
        text-align: center;
        font-weight: bold;
        font-size: 30px;
      }

      .form-box-list {
        padding: 10px 0;
      }

      .form-box__item {
        display: inline-block;
        width: 80px;
      }

      .footer {
        display: flex;
        text-align: center;
        align-items: center;
        width: 100%;
        justify-content: center;
        margin-top: 30px;
      }

      .btn {
        width: 100px;
        padding: 5px 10px;
        background: #66b1ff;
        border-radius: 5px;
        color: #fff;
        border: 1px solid #66b1ff;
        cursor: pointer;
      }

      .cancel {
        background: #fff;
        color: #000;
        margin-left: 10px;
        border: 1px solid #dcdfe6;
      }
    </style>
  </head>

  <body id="body">
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>-->
    <script src="./lib/xlsx.full.min.js"></script>
    <script src="./lib/three.min.js"></script>
    <script src="./lib/tween.min.js"></script>
    <script src="./lib/TrackballControls.js"></script>
    <script src="./lib/CSS3DRenderer.js"></script>
    <script src="./lib/ajax.js"></script>

    <div class="canvas-box">
      <canvas id="canvas">你的浏览器不支持canvas</canvas>
    </div>

    <div class="bg-box" id="bgVideo"></div>

    <div class="music">
      <audio id="music" class="music-item" loop></audio>
      <div id="musicBox" class="music-box" title="播放/暂停背景音乐"></div>
    </div>

    <div id="prizeBar"></div>

    <div id="container"></div>

    <div id="menu">
      <button id="enter">进入抽奖</button>
      <div id="lotteryBar" class="none">
        <button id="lottery">抽奖</button>
        <!-- <button id="reLottery">重新抽奖</button>-->
        <!-- <button id="result">返回首页</button> -->
        <!-- <button id="back">返回首页</button> -->
        <!-- <button id="awards">颁奖模式</button>-->
        <button id="reset" class="margin-l-40">重置</button>
        <!-- <button id="add" class="margin-l-40">神秘大奖</button>
        <button id="start" class="margin-l-40">年会抽奖</button>
        <button id="save" class="margin-l-40">导出结果</button>
        <button id="test" class="margin-l-40">配置奖品个数</button> -->
      </div>
    </div>

    <div class="qipao-container"></div>
    <div class="liveAlertPlaceholder">
      <div class="form-box">
        <div class="form-box-title">奖品个数设置</div>
        <div id="form-box-1">
          <div class="form-box-list">
            <span class="form-box__item">特等奖</span>
            <input id="inp-0" />
          </div>
          <div class="form-box-list">
            <span class="form-box__item">一等奖</span>
            <input id="inp-1" />
          </div>
          <div class="form-box-list">
            <span class="form-box__item">二等奖</span>
            <input id="inp-2" />
          </div>
          <div class="form-box-list">
            <span class="form-box__item">三等奖</span>
            <input id="inp-3" />
          </div>
        </div>
        <div id="form-box-2">
          <div class="form-box-list">
            <span class="form-box__item">神秘大奖</span>
            <input id="inp-4" />
          </div>
        </div>
        <div class="footer">
          <div onclick="submit()" class="btn">确定</div>
          <div onclick="cancel()" class="btn cancel">取消</div>
        </div>
      </div>
    </div>
    <script>
      function submit() {
        let int0 = document.getElementById('inp-0').value
        let int1 = document.getElementById('inp-1').value
        let int2 = document.getElementById('inp-2').value
        let int3 = document.getElementById('inp-3').value
        let int4 = document.getElementById('inp-4').value
        let box = document.getElementsByClassName('liveAlertPlaceholder')
        if (int0 && int1 && int2 && int3 && int4) {
          let dataList = [int0, int1, int2, int3]
          localStorage.setItem('prizeLocal', JSON.stringify(dataList))
          let dataListAdd = [int4]
          localStorage.setItem('prizeLocalAdd', JSON.stringify(dataListAdd))
          box[0].style.display = 'none'
          window.location.reload()
        } else {
          alert('所有奖品都需要设置个数')
        }
      }

      function cancel() {
        let box = document.getElementsByClassName('liveAlertPlaceholder')
        box[0].style.display = 'none'
      }

      const getUrlParams = (paramName) => {
        // 获取当前页面的 URL
        const url = new URL(window.location.href)
        const searchParams = url.searchParams

        // 获取指定参数的值
        const paramValue = searchParams.get(paramName)
        return paramValue
      }

      const pageType = getUrlParams('type')
      if (pageType == 'add') {
        document.getElementById('start').style.display = 'inline-block'
        document.getElementById('add').style.display = 'none'
      } else {
        document.getElementById('start').style.display = 'none'
        document.getElementById('add').style.display = 'inline-block'
      }
    </script>
  </body>
</html>
